<template lang="pug">
  form.search-base(@submit.prevent="submitSearch")
    .btn
      img(:src="backIcon",height="24",@click="goBack()")
    .search-input-base
      input.search-input(placeholder="输入您要的商品",v-model="value")
      .search-btn
        img(:src="searchIcon")
    .btn
      router-link(:to="{name: 'Home'}",tag="img",:src="homeIcon",height="24")
</template>

<script>
import backIcon from '../assets/icons/back-gray.svg'
import homeIcon from '../assets/icons/home-gray.svg'
import searchIcon from '../assets/icons/search-gray.svg'
export default {
  name: 'SearchGoods2',
  data () {
    return {
      backIcon: backIcon,
      homeIcon: homeIcon,
      searchIcon: searchIcon,
      value: ''
    }
  },
  methods: {
    goBack () {
      this.$router.push({name: 'Category'})
    },
    submitSearch () {
      if (this.value) {
        this.$router.push({name: 'GoodResults', query: {q: this.value}})
      }
    }
  },
  created () {
    this.value = this.$route.query.q
  },
  watch: {
    '$route': function (to, from) {
      this.value = to.query.q
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
.search-base
  padding: 10px
  border-bottom: $gray-bg 1px solid
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: center
  .btn
    padding: 5px
    text-align: center
  .search-input-base
    flex: 1 1
    background: $input-background
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    border-radius: 4px
    height: 42px
    input.search-input
      background: none
      border: none
      width: 100%
      height: 32px
      padding-left: 5px
      color: $gray
      font-size: 1em
      &:focus
        outline: none
        box-shadow: none
      &::-webkit-input-placeholder
        color: $gray
    .search-btn
      padding: 3px 10px
      img
        height: 16px
</style>
